<template>
  <div class="rules-modal" v-if="visible" @click="$emit('close')">
    <div class="rules-content" @click.stop>
      <div class="rules-header">
        <h2 class="rules-title">宣坨坨游戏规则</h2>
        <button class="close-icon" @click="$emit('close')">✕</button>
      </div>
      
      <div class="rules-body">
        <div class="rules-section">
          <h3>🎯 基本规则</h3>
          <ul>
            <li>3人游戏，每人发8张牌</li>
            <li>每人初始100个星光币</li>
            <li>按顺时针方向轮流出牌</li>
            <li>首发玩家可以出单牌、对子或多张牌</li>
            <li>后续玩家必须跟相同数量的牌或扣牌</li>
            <li>扣牌时需要从手牌中扣掉相同数量的牌</li>
          </ul>
        </div>

        <div class="rules-section">
          <h3>🃏 牌型大小（从大到小）</h3>
          <ol>
            <li><span class="red">红尔</span>（红色10）- 最大</li>
            <li>黑尔（黑色10）</li>
            <li><span class="red">红相</span>（红色9）</li>
            <li>黑相（黑色9）</li>
            <li><span class="red">红马</span>（红色8）</li>
            <li>黑马（黑色8）</li>
            <li><span class="red">红卒</span>（红色7）</li>
            <li>黑卒（黑色7）</li>
            <li>大王</li>
            <li><span class="red">红曲曲</span>（红色J、Q、K）</li>
            <li>小王</li>
            <li>黑曲曲（黑色J、Q、K）</li>
          </ol>
        </div>

        <div class="rules-section">
          <h3>🤝 对子规则</h3>
          <ul>
            <li>相同数字、相同颜色的牌可以组成对子</li>
            <li>大王和小王可以组成特殊对子</li>
            <li>同色的J、Q、K（曲曲）之间可以任意组合成对子</li>
            <li>例如：红桃J + 方块Q 可以组成对子</li>
            <li><strong>特殊规则：</strong>大小王对与红尔对不分胜负</li>
          </ul>
        </div>

        <div class="rules-section">
          <h3>🎮 出牌规则</h3>
          <ul>
            <li>首发：可以出1张、2张（对子）或3张以上（同色曲曲）</li>
            <li>跟牌：必须出相同数量且更大的牌</li>
            <li>扣牌：如果没有更大的牌可以选择扣牌</li>
            <li><strong>强制出牌：</strong>如果有能打过当前牌的组合，必须出牌，不能扣牌</li>
            <li>每轮结束后，赢家收取本轮所有出的牌（每张牌×3倍计算）</li>
          </ul>
        </div>

        <div class="rules-section">
          <h3>🔥 扣了规则</h3>
          <ul>
            <li><strong>触发条件：</strong>轮到自己出牌时可以选择"扣了"（AI需收牌≥9张）</li>
            <li><strong>决策阶段：</strong>其他玩家必须选择"扣"或"宣"：
              <ul>
                <li><strong>"扣"：</strong>认为发起者赢不了，安全选择</li>
                <li><strong>"宣"：</strong>认为发起者能赢，承担风险博取高收益</li>
              </ul>
            </li>
            <li><strong>结果处理：</strong>
              <ul>
                <li><strong>全部扣了：</strong>平局重新发牌，所有数据重置</li>
                <li><strong>有人宣：</strong>游戏继续，记录风险信息</li>
              </ul>
            </li>
          </ul>
        </div>

        <div class="rules-section">
          <h3>🏆 胜负判定</h3>
          <ul>
            <li>游戏结束时，根据收取的牌数判定输赢：</li>
            <li><strong>9-14张：</strong>刚够（赢1个星光币）</li>
            <li><strong>15-17张：</strong>五了（赢2个星光币）</li>
            <li><strong>18张及以上：</strong>此了（赢3个星光币）</li>
            <li><strong>少于9张：</strong>不够（输相应星光币）</li>
          </ul>
        </div>

        <div class="rules-section">
          <h3>💰 支付规则</h3>
          <ul>
            <li><strong>基础支付：</strong>不够的玩家向够了的玩家支付相应星光币</li>
            <li><strong>扣了风险支付：</strong>当发生"扣了"博弈时：
              <ul>
                <li>如果发起"扣了"的玩家最终赢了</li>
                <li>且选择"宣"的玩家最终输了</li>
                <li>则"宣"的玩家需额外支付<strong>双倍</strong>星光币给发起者</li>
              </ul>
            </li>
            <li><strong>风险与收益：</strong>选择"宣"是高风险高收益的博弈决策</li>
          </ul>
        </div>
      </div>

      <button class="close-btn" @click="$emit('close')">关闭</button>
    </div>
  </div>
</template>

<script setup>
defineProps({
  visible: Boolean
});

defineEmits(['close']);
</script>

<style scoped>
.rules-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 15px;
  backdrop-filter: blur(5px);
}

.rules-content {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 20px;
  padding: 0;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  width: 100%;
  max-width: 500px;
}

.rules-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rules-title {
  color: #ffd700;
  margin: 0;
  font-size: 24px;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.close-icon {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.close-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

.rules-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.rules-section {
  margin-bottom: 25px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.rules-section h3 {
  color: #4ecdc4;
  margin-bottom: 15px;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rules-section ul,
.rules-section ol {
  color: #e0e0e0;
  padding-left: 20px;
  margin: 0;
}

.rules-section li {
  margin-bottom: 10px;
  line-height: 1.5;
  font-size: 14px;
}

.red {
  color: #ff4444;
  font-weight: bold;
}

.close-btn {
  display: block;
  width: calc(100% - 40px);
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.close-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* 自定义滚动条 */
.rules-body::-webkit-scrollbar {
  width: 6px;
}

.rules-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.rules-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.rules-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 响应式 */
@media (max-width: 768px) {
  .rules-content {
    border-radius: 15px;
    max-height: 95vh;
  }
  
  .rules-header {
    padding: 15px;
  }
  
  .rules-title {
    font-size: 20px;
  }
  
  .rules-body {
    padding: 15px;
  }
  
  .rules-section {
    padding: 12px;
    margin-bottom: 20px;
  }
  
  .rules-section h3 {
    font-size: 16px;
  }
  
  .rules-section li {
    font-size: 13px;
    margin-bottom: 8px;
  }
  
  .close-btn {
    padding: 12px;
    font-size: 15px;
    margin: 15px;
  }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 600px) {
  .rules-modal {
    padding: 10px;
  }
  
  .rules-content {
    max-width: 90vw;
    max-height: 95vh;
    width: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  
  .rules-header {
    padding: 12px 20px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.98) 50%, rgba(15, 52, 96, 0.98) 100%);
    backdrop-filter: blur(10px);
  }
  
  .rules-title {
    font-size: 20px;
  }
  
  .close-icon {
    width: 35px;
    height: 35px;
    font-size: 20px;
  }
  
  .rules-body {
    padding: 15px 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
  }
  
  .rules-section {
    margin-bottom: 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
  }
  
  .rules-section:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  
  /* 特定布局调整 */
  .rules-section:nth-child(1) { grid-column: span 1; }
  .rules-section:nth-child(2) { grid-column: span 1; }
  .rules-section:nth-child(3) { grid-column: span 1; }
  .rules-section:nth-child(4) { grid-column: span 1; }
  .rules-section:nth-child(5) { grid-column: span 2; }
  .rules-section:nth-child(6) { grid-column: span 1; }
  .rules-section:nth-child(7) { grid-column: span 1; }
  
  .rules-section h3 {
    font-size: 16px;
    margin-bottom: 10px;
  }
  
  .rules-section ul,
  .rules-section ol {
    padding-left: 18px;
  }
  
  .rules-section li {
    font-size: 13px;
    margin-bottom: 6px;
    line-height: 1.4;
  }
  
  /* 嵌套列表样式优化 */
  .rules-section ul ul {
    margin-top: 5px;
    padding-left: 15px;
  }
  
  .rules-section ul ul li {
    font-size: 12px;
    color: rgba(224, 224, 224, 0.85);
  }
  
  .close-btn {
    margin: 12px 20px;
    padding: 10px 20px;
    font-size: 14px;
    position: sticky;
    bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 10;
  }
}

/* 超小横屏设备（高度小于450px） */
@media (orientation: landscape) and (max-height: 450px) {
  .rules-modal {
    padding: 5px;
  }
  
  .rules-content {
    max-height: 98vh;
  }
  
  .rules-header {
    padding: 8px 15px;
  }
  
  .rules-title {
    font-size: 18px;
  }
  
  .close-icon {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }
  
  .rules-body {
    padding: 10px 15px;
    gap: 10px;
    /* 三列布局以充分利用横向空间 */
    grid-template-columns: repeat(3, 1fr);
  }
  
  .rules-section {
    padding: 10px;
  }
  
  /* 调整布局以适应三列 */
  .rules-section:nth-child(1) { grid-column: span 1; }
  .rules-section:nth-child(2) { grid-column: span 1; }
  .rules-section:nth-child(3) { grid-column: span 1; }
  .rules-section:nth-child(4) { grid-column: span 1; }
  .rules-section:nth-child(5) { grid-column: span 1; }
  .rules-section:nth-child(6) { grid-column: span 1; }
  .rules-section:nth-child(7) { grid-column: span 3; }
  
  .rules-section h3 {
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  .rules-section li {
    font-size: 11px;
    margin-bottom: 4px;
  }
  
  .rules-section ul ul li {
    font-size: 10px;
  }
  
  .close-btn {
    margin: 8px 15px;
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* 触摸设备优化 */
@media (pointer: coarse) {
  .close-icon {
    min-width: 44px;
    min-height: 44px;
  }
  
  .close-btn {
    min-height: 44px;
  }
}
</style>